<template>
	<div id="comment">
		<div class="header">
			<van-cell size="large">
				<div slot="icon" class="iconko" @click="getIcon">
					<van-icon name="arrow-left" />
				</div>
				<div slot="title" class="cellbox">评价</div>
			</van-cell>
			<van-card :num="myitems.number" :price="myorder.total_amount" :desc="'价格：'+myitems.price" title="商品标题" :thumb="img" />
			<div class="pingjbxo">
				<div class="header-ms"> 描述相符：
					<van-rate v-model="value" :size="20" color="#ffd21e" void-icon="star" void-color="#eee" />
				</div>
				<div class="jianj">
					<van-field v-model="message" rows="2" autosize label="评价" type="textarea" maxlength="50" placeholder="请输入评价"
					 show-word-limit />
				</div>
				<van-uploader v-model="fileList" multiple />
			</div>
		</div>
		<van-button type="primary" block color="#343434" class="kuijiBtn" @click="fabiao">发表评论</van-button>
	</div>
</template>

<script>
	import {
		Cell,
		CellGroup,
		Icon,
		Field,
		Rate,
		Uploader,
		Button,
		Toast,
		SwipeCell,
		Card
	} from 'vant';
	export default {
		data() {
			return {
				message: '',
				value: 5,
				fileList: [

				],
				myitems: [],
				myorder:[],
				img:''
				
			}
		},
		created() {
			this.$axios.get('http://116.63.80.218/orders/info', {
				params: {
					userId: this.$store.state.nameId.userid,
					orderNo: this.$route.params.id
				}
			}).then(res => {
			
				this.myitems = res.data.items[0]
				this.myorder = res.data.order[0]
			    // 请求商品详情数据
				this.$get(this.$API.PRODUCTS_INFO, {
					productId:res.data.items[0].product_id,
					userId: this.$store.state.nameId.userid,
				}).then(resc => {
					// console.log(resc.data.product[0])
				  if(resc.data.product[0].id==res.data.items[0].product_id){
					   this.img=resc.data.product[0].image
				  }
					
				})

			})
		},
		methods: {
			getIcon() {
				this.$router.go(-1)
			},
			fabiao() {
				
             if(this.message!=''){
				 // 请求订单详情页
				 this.$axios.get('http://116.63.80.218/orders/info', {
				 	params: {
				 		userId: this.$store.state.nameId.userid,
				 		orderNo: this.$route.params.id
				 	}
				 }).then(res => {
				 	// console.log(res)
				 	this.myitems = res.data.items[0].number
				 	this.myitems = res.data.order[0].total_amount
				 	for(let i=0;i<res.data.items.length;i++){
				 		console.log(res.data.items[i])
				 		// console.log()
				 		// 请求添加评论
				 		this.$axios.get('http://116.63.80.218/comments/add',{
				 			params:{
				 				userId:this.$store.state.nameId.userid,
				 				productId:res.data.items[i].product_id,
				 				content:this.message,
				 				stars:this.value
				 			}
				 		}).then(res=>{
				 			console.log(res)
				 			if(res.status==200){
				 				Toast.success({
				 					message: '评价发表成功',
				 					duration: 300
				 				});
				 				 this.value=0
				 				 this.message=''
				 				 this.$router.push({path:"/order"})
				 			}
				 		})
				 	}
				 })
				 
			 }else{
				 Toast({message:'说点什么吧',duration: 300})
			 }


			}
		},
		watch: {

		},
		components: {
			[Cell.name]: Cell,
			[CellGroup.name]: CellGroup,
			[Icon.name]: Icon,
			[Field.name]: Field,
			[Rate.name]: Rate,
			[Uploader.name]: Uploader,
			[Button.name]: Button,
			[Toast.name]: Toast,
			[Card.name]: Card

		}
	}
</script>

<style lang="less" scoped="scoped">
	#comment {
		height: 100vh;
		background: #f6f6f6;
	}

	.header .van-cell {
		box-shadow: 0 1px 1px rgba(100, 100, 100, 0.2);
	}

	/deep/.van-card {
		position: relative;
		box-sizing: border-box;
		padding: 8px 16px;
		color: #323233;
		font-size: 12px;
		background-color: white;
	}



	.cellbox {
		font-size: 15px;
		text-align: center;
	}

	.iconko {
		font-size: 20px;
	}

	.pingjbxo {
		width: 100vw;
		height: 70vw;
		background-color: white;
		padding: 0 10px;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		justify-content: center;

		.header-ms {
			height: 40px;
			display: flex;
			align-items: center;
			margin-bottom: 10px;
		}

		.jianj {
			height: 100px;
		}

		.tupian {
			height: 90px;
		}
	}

	.kuijiBtn {
		width: 70vw;
		margin: 30px auto;
	}
</style>
